<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体图标</title>
  <!-- 两种方式 推荐iconfont  、font-awesome -->

  <!-- 1、iconfont 单色图标库使用 引入样式文件 -->
  <link rel="stylesheet" href="../download/font_9saqil75th/iconfont.css">

  <script src="../彩色图标/font_3537031_i6rcpeylutt/iconfont.js"></script>

  <!-- 测试引入 -->
  <link rel="stylesheet" href="../测试项目导入图标/font_3537081_cucj5nj5fdf/iconfont.css">

  <!-- b.使用font-awsome -->
  <!-- 3.1引入样式文件 在线引入 -->
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    /* 加入通用css代码（引入一次就行） */
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }

    .iconfont {
      color: blue;
    }
  </style>


</head>

<body>
  <!-- 2、使用单色图标 -->
  <i class="iconfont icon-a-ziyuan56"></i>
  <!-- 3、使用多色图标库 -->
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-kafei"></use>
  </svg>

  <!-- 使用font-awsome图标库 -->
  <i class="fa fa-bell-o"></i>


</body>
<script>

</script>

</html>